<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Shards Demo - A Modern UI Toolkit for Web Makers</title>
    <meta name="description" content="Elegant UI Toolkit for Professional Web Creatives Based on Bootstrap 4">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/shards.min.css">
    <link rel="stylesheet" href="css/shards-demo.css?v=1.1.0">
</head>

<body>
<div class="loader"><div class="page-loader"></div></div>

<!-- Floating Shards -->
<img src="images/demo/shard-1-5x-3.png" alt="Shard" class="shard">

<!-- Welcome Section -->
<div class="welcome d-flex justify-content-center flex-column">
    <div class="inner-wrapper mt-auto mb-auto">
        <h1 class="slide-in">Shards</h1>
        <p class="slide-in">A modern UI toolkit for web makers.</p>
        <div class="action-links slide-in">
          <a href="https://designrevision.com/downloads/shards" class="btn btn-primary btn-pill align-self-center mr-2"><i class="fa fa-download mr-1"></i> Download Now</a>
          <a href="#" data-scroll-to="#introduction" id="scroll-to-content" class="btn btn-outline-light btn-pill align-self-center">Learn More</a>
        </div>
    </div>
    <div class="product-by">
        <a href="https://designrevision.com" target="_blank">
            <p>A Product By</p>
            <img src="https://dgc2qnsehk7ta.cloudfront.net/general/designrevision-logo.png" alt="DesignRevision - Making powerful tools for web professionals">
        </a>
    </div>
</div>

<!-- Page Content -->
<div class="page-content">
    <!-- Content -->
    <div class="content clearfix">

        <div id="introduction" class="container mb-5">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <p class="lead">Shards is a modern design system based on Bootstrap 4 that comes packed with <b>10 extra
                    custom components</b> and <b>two pre-built landing pages</b>. It’s also lightweight with its
                    stylesheet weighting only <b>~12kb minified and gzipped</b>.</p>
                <div class="social-actions">
                    <div class="fb-like" data-href="https://www.facebook.com/designrevision" data-layout="button_count"
                         data-action="like" data-size="large"
                         data-show-faces="false" data-share="false"></div>
                    <div class="fb-share-button" data-href="https://designrevision.com/download/shards"
                         data-layout="button" data-size="large"
                         data-mobile-iframe="true">
                        <a class="fb-xfbml-parse-ignore" target="_blank"
                           href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdesignrevision.com%2Fdownload%2Fshards&amp;src=sdkpreparse">Share</a>
                    </div>
                    <a href="https://twitter.com/DesignRevision?ref_src=twsrc%5Etfw" class="twitter-follow-button"
                       data-show-count="false" data-size="large"
                       data-show-screen-name="false">Follow</a>
                    <a class="twitter-share-button" href="https://twitter.com/share" data-size="large"
                       data-text="I'm in love with Shards, a free Bootstrap 4 UI kit"
                       data-url="https://designrevision.com/downloads/shards" data-hashtags="ui,design,web,bootstrap" data-via="DesignRevision">
                        Tweet
                    </a>
                    <a class="github-button" href="https://github.com/designrevision/shards-ui" data-icon="octicon-star"
                       data-show-count="true"
                       data-size="large" aria-label="Star designrevision/s on GitHub">Star</a>
                </div>
            </div>
        </div>

        <!-- Colors -->
        <div id="colors" class="container mb-5">

            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Colors</h3>
                <p>We've enhanced Bootstrap’s semantic color selection with brighter color variations in order to improve
                    the contrast and accessibility.</p>
            </div>

            <div class="example col-md-10 ml-auto mr-auto">
                <div class="row">
                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #0067f4"></div>
                            <span class="title">Primary</span>
                            <span class="hex-value">#0067f4</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #5A6169"></div>
                            <span class="title">Secondary</span>
                            <span class="hex-value">#5A6169</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #17c671"></div>
                            <span class="title">Success</span>
                            <span class="hex-value">#17c671</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #00b8d8"></div>
                            <span class="title">Info</span>
                            <span class="hex-value">#00b8d8</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #ffb400"></div>
                            <span class="title">Warning</span>
                            <span class="hex-value">#ffb400</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #c4183c"></div>
                            <span class="title">Danger</span>
                            <span class="hex-value">#c4183c</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #e9ecef"></div>
                            <span class="title">Light</span>
                            <span class="hex-value">#e9ecef</span>
                        </div>
                    </div>

                    <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
                        <div class="color">
                            <div class="swatch" style="background: #212529"></div>
                            <span class="title">Dark</span>
                            <span class="hex-value">#212529</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Typography -->
        <div id="typography" class="container mb-5">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Typography</h3>
                <p>Shards uses Poppins as its primary typeface for headings and the system’s UI font with a Roboto-first
                    fallback (only on non-Apple devices) for the remaining content.</p>
            </div>

            <div class="example col-md-10 ml-auto mr-auto">
                <table class="table table-striped table-responsive">
                    <thead>
                    <tr>
                        <th>Type</th>
                        <th>Example</th>
                        <th>Font</th>
                        <th>Font Size</th>
                        <th>Line Height</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Heading 1</td>
                        <td>
                            <h1>ABCabc</h1>
                        </td>
                        <td>Poppins Semibold</td>
                        <td>3.052 REM</td>
                        <td>3 REM</td>
                    </tr>
                    <tr>
                        <td>Heading 2</td>
                        <td>
                            <h2>ABCabc</h2>
                        </td>
                        <td>Poppins Medium</td>
                        <td>2.441 REM</td>
                        <td>2.25 REM</td>
                    </tr>
                    <tr>
                        <td>Heading 3</td>
                        <td>
                            <h3>ABCabc</h3>
                        </td>
                        <td>Poppins Medium</td>
                        <td>1.953 REM</td>
                        <td>2.25 REM</td>
                    </tr>
                    <tr>
                        <td>Paragraph</td>
                        <td>
                            <p>ABCabc</p>
                        </td>
                        <td>System UI / Roboto</td>
                        <td>1 REM</td>
                        <td>1.5</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="py-5">
            <!-- Icon Packs -->
            <div id="icon-packs" class="container mb-5">
                <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto mb-5">
                    <h2 class="text-center mb-4">Icon Packs 🦄</h2>
                    <p class="text-center">Shards supports by default both <b>Material</b> and <b>FontAwesome</b> packs. Icons can be placed in almost any element without the need of modifying the kit.</p>
                </div>
            </div>

            <div class="icons-example clearfix mb-5">
                <div class="icons-example-wrapper material-icons col-md-6 float-left">
                    <div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center ml-auto mr-auto py-5">
                        <img class="mb-4" src="images/demo/material-icons.svg" alt="Shards supports the Material Icons pack by default.">
                        <h2 class="text-light mb-2">Material Icons</h2>
                        <h5 class="text-muted mb-0">Over 900+ Icons</h5>
                    </div>
                </div>

                <div class="icons-example-wrapper font-awesome col-md-6 float-left">
                    <div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center mr-auto ml-auto py-5">
                        <img class="mb-4" src="images/demo/fontawesome-icons.svg" alt="Shards supports the FontAwesome Icons pack by default.">
                        <h2 class="text-light mb-2">Font Awesome</h2>
                        <h5 class="text-muted mb-0">Over 600+ Icons</h5>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Controls -->
        <div id="forms" class="container mb-5">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Form Controls</h3>
                <p>All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.</p>
            </div>

            <!-- Form Controls - Simple Forms: Default / Using Icons (Seamless) -->
            <div class="example col-lg-8 col-md-10 ml-auto mr-auto">
                <h5>Simple Forms</h5>

                <!-- Form Controls: Simple Forms -->
                <div class="row mb-5">
                    <div class="col-md-12">
                        <form>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label for="form1-name" class="col-form-label">Name</label>
                                    <input type="text" class="form-control" id="form1-name" placeholder="Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="form1-email" class="col-form-label">Email</label>
                                    <input type="email" class="form-control" id="form1-email" placeholder="Email">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="form1-password">Password</label>
                                    <input type="password" class="form-control" id="form1-password" placeholder="Password" required>
                                </div>
                                <div class="col-md-3 mb-4">
                                    <label for="form1-state">State</label>
                                    <select class="custom-select d-block col-md-3" id="form1-state" required>
                                        <option value="">Choose One</option>
                                        <option value="1">California</option>
                                        <option value="2">Virginia</option>
                                        <option value="3">Texas</option>
                                        <option value="4">Florida</option>
                                    </select>
                                </div>

                                <div class="col-md-3 mb-4">
                                    <label for="form1-zip">Zip</label>
                                    <input type="text" class="form-control" id="form1-zip" placeholder="Zip" required>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Form Controls: Using Icons -->
                <h5 class="mb-4">Using Icons</h5>
                <p>Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default or seamlessly integrated input group addons.</p>

                <!-- Form Controls: Using Icons - Seamless -->
                <div class="row mb-2">
                    <div class="col-12">
                        <h6 class="text-muted">Seamless</h6>
                        <form>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="input-group with-addon-icon-left">
                                        <span class="input-group-addon">
                                            <i class="fa fa-user"></i>
                                        </span>
                                        <input type="text" class="form-control" id="form1-username" placeholder="Username">
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <div class="input-group with-addon-icon-right">
                                        <input type="password" class="form-control" id="form1-email" placeholder="Password">
                                        <span class="input-group-addon">
                                            <i class="fa fa-lock"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Form Controls: Using Icons - Default -->
                <div class="row mb-2">
                    <div class="col-12">
                        <h6 class="text-muted">Default</h6>
                        <form>
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-user"></i>
                                        </span>
                                        <input type="text" class="form-control" id="form1-username" placeholder="Username">
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="form1-email" placeholder="Password">
                                        <span class="input-group-addon">
                                            <i class="fa fa-lock"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Form Controls: Custom Controls -->
            <div class="example col-lg-8 col-md-10 ml-auto mr-auto">
                <div class="container">
                    <div class="row">
                        <h5 class="mb-4 w-100">Custom Controls</h5>
                        <p class="mb-5">The default custom form fields are improved and extended. One of the new additions being the <strong>toggle switch</strong> control.</p>
                    </div>

                    <div class="row mb-5">
                        <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-0">
                            <h6 class="text-muted mb-2">Checkboxes</h6>
                            <fieldset>
                                <label class="custom-control custom-checkbox d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Pizza</span>
                                </label>
                            </fieldset>

                            <fieldset>
                                <label class="custom-control custom-checkbox d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Pasta</span>
                                </label>
                            </fieldset>

                            <fieldset disabled>
                                <label class="custom-control custom-checkbox d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Burgers</span>
                                </label>
                            </fieldset>

                            <fieldset disabled>
                                <label class="custom-control custom-checkbox d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Tacos</span>
                                </label>
                            </fieldset>
                        </div>
                        <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12">
                            <h6 class="text-muted mb-2">Radio Buttons</h6>
                            <fieldset>
                                <label class="custom-control custom-radio d-block my-2">
                                    <input id="radioStacked-1" name="radio-stacked" type="radio"
                                           class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Cookies</span>
                                </label>
                            </fieldset>

                            <fieldset>
                                <label class="custom-control custom-radio d-block my-2">
                                    <input id="radioStacked-2" name="radio-stacked" type="radio"
                                           class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Pancakes</span>
                                </label>
                            </fieldset>

                            <fieldset disabled>
                                <label class="custom-control custom-radio d-block my-2">
                                    <input id="radioStacked-3" name="radio-stacked" type="radio"
                                           class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Chocolate</span>
                                </label>
                            </fieldset>

                            <fieldset disabled>
                                <label class="custom-control custom-radio d-block my-2">
                                    <input id="radioStacked-4" name="radio-stacked" type="radio"
                                           class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Milkshake</span>
                                </label>
                            </fieldset>
                        </div>
                        <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-4">
                            <h6 class="text-muted mb-1">Toggles</h6>
                            <fieldset>
                                <label class="custom-control custom-toggle d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Rockets</span>
                                </label>
                            </fieldset>

                            <fieldset>
                                <label class="custom-control custom-toggle d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Lasers</span>
                                </label>
                            </fieldset>

                            <fieldset disabled="disabled">
                                <label class="custom-control custom-toggle d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">HAL 9K</span>
                                </label>
                            </fieldset>

                            <fieldset disabled="disabled">
                                <label class="custom-control custom-toggle d-block my-2">
                                    <input type="checkbox" class="custom-control-input" required checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">Ultron</span>
                                </label>
                            </fieldset>
                        </div>
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-6 pl-0 custom-dropdown-example">
                            <h6 class="text-muted mb-3">Custom Dropdown</h6>
                            <fieldset>
                                <select class="custom-select w-100" required>
                                    <option value="">Select Favourite Number</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </fieldset>
                        </div>

                        <div class="col-md-6 pl-0">
                            <h6 class="text-muted mb-3">Custom File Input</h6>
                            <fieldset>
                                <label class="custom-file w-100">
                                    <input type="file" id="form-file-3" class="custom-file-input" required="">
                                    <span class="custom-file-control"></span>
                                </label>
                            </fieldset>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <h5 class="mb-4">Validation</h5>
                        <p class="mb-4">Form validation is also improved to match the new overall form feel, while
                            following the same interaction principles
                            for consistency.</p>
                        <form class="was-validated">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="form-2-first-name">First name</label>
                                    <input type="text" class="form-control is-valid" id="form-2-first-name"
                                           placeholder="First name" value="Catalin" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="form-2-last-name">Last name</label>
                                    <input type="text" class="form-control is-valid" id="form-2-last-name"
                                           placeholder="Last name" value="Vasile" required>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="form-2-city">City</label>
                                    <input type="text" class="form-control is-invalid" id="form-2-city"
                                           placeholder="City" required>
                                    <div class="invalid-feedback">
                                        Invalid city
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="form-2-state">State</label>
                                    <input type="text" class="form-control is-invalid" id="form-2-state"
                                           placeholder="State" required>
                                    <div class="invalid-feedback">
                                        Invalid state
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="form-2-zip">Zip</label>
                                    <input type="text" class="form-control is-invalid" id="form-2-zip" placeholder="Zip"
                                           required>
                                    <div class="invalid-feedback">
                                        Invalid ZIP code
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-6 mb-3">
                                    <label for="form-file-4">Photo ID Scan</label>
                                    <label class="custom-file w-100">
                                        <input type="file" id="form-file-4" class="custom-file-input" required>
                                        <span class="custom-file-control"></span>
                                    </label>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="d-block" for="form-3-select">Favourite Number</label>
                                    <select class="custom-select w-100" id="form-3-select" required>
                                        <option value="">Invalid select menu</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <label class="custom-control custom-checkbox">
                                        <input type="checkbox" id="form-3-terms" class="custom-control-input" required>
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">Do you agree to our terms & conditions?</span>
                                    </label>
                                </div>

                                <div class="col-md-6">
                                    <div class="custom-controls-stacked d-block ">
                                        <label class="custom-control custom-radio">
                                            <input id="radioStacked1" name="radio-stacked" type="radio"
                                                   class="custom-control-input" required>
                                            <span class="custom-control-indicator"></span>
                                            <span class="custom-control-description">Subscribe me</span>
                                        </label>
                                        <label class="custom-control custom-radio">
                                            <input id="radioStacked4" name="radio-stacked" type="radio"
                                                   class="custom-control-input" required>
                                            <span class="custom-control-indicator"></span>
                                            <span class="custom-control-description">Don't subscribe me</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sliders -->
        <div id="sliders" class="container mb-5" style="padding-bottom: 1px">
            <div class="my-5">
                <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                    <h3 class="mb-4">Sliders</h3>
                    <p>Sliders are also a new custom control and can be integrated almost anywhere with minimal markup
                        <i>(a single element)</i> and extended customisation options via JavaScript.</p>
                </div>

                <div class="example col-lg-8 col-md-10 ml-auto mr-auto mb-0">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div id="slider-example-1">
                                <input type="text" class="custom-slider-input">
                                <input type="text" class="custom-slider-input">
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div id="slider-example-2">
                                <input type="text" class="custom-slider-input">
                                <input type="text" class="custom-slider-input">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="slider-example-3">
                                <input type="text" class="custom-slider-input">
                                <input type="text" class="custom-slider-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Datepickers -->
        <div id="datepickers" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Datepickers</h3>
                <p>Datepickers are also available and similar to slider controls they are
                    <strong>very easy to create</strong>, being based on a single input element. Datepickers are
                    customisable as well, letting
                    you create complex configurations with range selections for example.</p>
            </div>

            <div class="example col-lg-8 col-md-10 ml-auto mr-auto">
                <div class="row">
                    <div class="col-lg-4 col-md-12">
                        <div class="form-group">
                            <label for="datepicker-example-1">Date of Birth</label>
                            <div class="input-group with-addon-icon-left">
                                <input type="text" class="form-control" id="datepicker-example-1">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-12">
                        <div class="form-group">
                            <label>Employment Period</label>
                            <div class="input-daterange input-group" id="datepicker-example-2">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                <input type="text" class="input-sm form-control" name="start"/>
                                <span class="input-group-addon">to</span>
                                <input type="text" class="input-sm form-control" name="end"/>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Cards -->
        <div id="cards" class="container mb-2" style="padding-bottom: 1px">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Cards</h3>
                <p>We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing them to play well with the other components.</p>
            </div>

            <div class="example col-md-12 ml-auto mr-auto">
                <div class="row">
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
                        <div class="card">
                            <img class="card-img-top" src="images/demo/stock-photos/3.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">Sample Card Title</h4>
                                <p class="card-text">He seems sinking under the evidence could not only grieve and a
                                    visit. The father is to bless and placed
                                    in his length hid...</p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
                        <div class="card">
                            <img class="card-img-top" src="images/demo/stock-photos/1.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">Sample Card Title</h4>
                                <p class="card-text">He seems sinking under the evidence could not only grieve and a
                                    visit. The father is to bless and placed
                                    in his length hid...</p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
                        <div class="card">
                            <img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">Sample Card Title</h4>
                                <p class="card-text">He seems sinking under the evidence could not only grieve and a
                                    visit. The father is to bless and placed
                                    in his length hid...</p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 col-sm-12 d-none sm-hidden last">
                        <div class="card">
                            <img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">Sample Card Title</h4>
                                <p class="card-text">He seems sinking under the evidence could not only grieve and a
                                    visit. The father is to bless and placed
                                    in his length hid...</p>
                                <a href="#" class="btn btn-primary">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div id="buttons" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Buttons</h3>
                <p>Two new button modifiers are introduced in Shards that allow you to create <strong>pill-shaped</strong> and <strong>squared</strong> buttons for both filled and outlined variations for an extended range of possible combinations.</p>
            </div>

            <div class="example example-buttons">
                <div class="col-md-9 ml-auto mr-auto">
                    <h5 class="text-muted mb-4">Normal</h5>
                </div>

                <!-- Normal Buttons -->
                <div class="row mb-4">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-primary">Primary</button>
                        <button type="button" class="btn btn-secondary">Secondary</button>
                        <button type="button" class="btn btn-success">Success</button>
                        <button type="button" class="btn btn-danger">Danger</button>
                        <button type="button" class="btn btn-warning">Warning</button>
                        <button type="button" class="btn btn-info">Info</button>
                        <button type="button" class="btn btn-light">Light</button>
                        <button type="button" class="btn btn-dark">Dark</button>
                    </div>
                </div>

                <!-- Outlined Buttons -->
                <div class="mb-5 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-outline-primary">Primary</button>
                        <button type="button" class="btn btn-outline-secondary">Secondary</button>
                        <button type="button" class="btn btn-outline-success">Success</button>
                        <button type="button" class="btn btn-outline-danger">Danger</button>
                        <button type="button" class="btn btn-outline-warning">Warning</button>
                        <button type="button" class="btn btn-outline-info">Info</button>
                        <button type="button" class="btn btn-outline-light">Light</button>
                        <button type="button" class="btn btn-outline-dark">Dark</button>
                    </div>
                </div>

                <div class="col-md-9 ml-auto mr-auto">
                    <h5 class="text-muted mb-4">Squared</h5>
                </div>

                <!-- Squared Buttons -->
                <div class="mb-4 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-primary btn-squared">Primary</button>
                        <button type="button" class="btn btn-secondary btn-squared">Secondary</button>
                        <button type="button" class="btn btn-success btn-squared">Success</button>
                        <button type="button" class="btn btn-danger btn-squared">Danger</button>
                        <button type="button" class="btn btn-warning btn-squared">Warning</button>
                        <button type="button" class="btn btn-info btn-squared">Info</button>
                        <button type="button" class="btn btn-light btn-squared">Light</button>
                        <button type="button" class="btn btn-dark btn-squared">Dark</button>
                    </div>
                </div>

                <!-- Squared and Outlined Buttons -->
                <div class="mb-5 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-outline-primary btn-squared">Primary</button>
                        <button type="button" class="btn btn-outline-secondary btn-squared">Secondary</button>
                        <button type="button" class="btn btn-outline-success btn-squared">Success</button>
                        <button type="button" class="btn btn-outline-danger btn-squared">Danger</button>
                        <button type="button" class="btn btn-outline-warning btn-squared">Warning</button>
                        <button type="button" class="btn btn-outline-info btn-squared">Info</button>
                        <button type="button" class="btn btn-outline-light btn-squared">Light</button>
                        <button type="button" class="btn btn-outline-dark btn-squared">Dark</button>
                    </div>
                </div>

                <div class="col-md-9 ml-auto mr-auto">
                    <h5 class="text-muted mb-4">Pill-shaped</h5>
                </div>

                <!-- Pill Shaped Buttons -->
                <div class="mb-4 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-primary btn-pill">Primary</button>
                        <button type="button" class="btn btn-secondary btn-pill">Secondary</button>
                        <button type="button" class="btn btn-success btn-pill">Success</button>
                        <button type="button" class="btn btn-danger btn-pill">Danger</button>
                        <button type="button" class="btn btn-warning btn-pill">Warning</button>
                        <button type="button" class="btn btn-info btn-pill">Info</button>
                        <button type="button" class="btn btn-light btn-pill">Light</button>
                        <button type="button" class="btn btn-dark btn-pill">Dark</button>
                    </div>
                </div>

                <!-- Pill-shaped and Outlined Buttons -->
                <div class="mb-5 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-outline-primary btn-pill">Primary</button>
                        <button type="button" class="btn btn-outline-secondary btn-pill">Secondary</button>
                        <button type="button" class="btn btn-outline-success btn-pill">Success</button>
                        <button type="button" class="btn btn-outline-danger btn-pill">Danger</button>
                        <button type="button" class="btn btn-outline-warning btn-pill">Warning</button>
                        <button type="button" class="btn btn-outline-info btn-pill">Info</button>
                        <button type="button" class="btn btn-outline-light btn-pill">Light</button>
                        <button type="button" class="btn btn-outline-dark btn-pill">Dark</button>
                    </div>
                </div>

                <div class="col-md-9 ml-auto mr-auto">
                    <h5 class="text-muted mb-4">Using Icons</h5>
                </div>

                <!-- Buttons with Icons : Material Icons -->
                <div class="mb-4 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-pill btn-primary"><i class="fa fa-download mr-1"></i> Download</button>
                        <button type="button" class="btn btn-pill btn-secondary"><i class="fa fa-lock mr-1"></i>Authorize</button>
                        <button type="button" class="btn btn-pill btn-success"><i class="fa fa-check mr-1"></i>Success</button>
                        <button type="button" class="btn btn-pill btn-danger"><i class="fa fa-remove mr-1"></i>Delete</button>
                        <button type="button" class="btn btn-pill btn-info"><i class="fa fa-envelope mr-1"></i> Message</button>
                        <button type="button" class="btn btn-pill btn-warning"><i class="fa fa-star mr-1"></i>Favourite</button>
                    </div>
                </div>

                <!-- Buttons with Icons : FontAwesome -->
                <div class="mb-5 row">
                    <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
                        <button type="button" class="btn btn-pill btn-outline-primary"><i class="fa fa-download mr-1"></i> Download</button>
                        <button type="button" class="btn btn-pill btn-outline-secondary"><i class="fa fa-lock mr-1"></i>Authorize</button>
                        <button type="button" class="btn btn-pill btn-outline-success"><i class="fa fa-check mr-1"></i>Success</button>
                        <button type="button" class="btn btn-pill btn-outline-danger"><i class="fa fa-remove mr-1"></i>Delete</button>
                        <button type="button" class="btn btn-pill btn-outline-info"><i class="fa fa-envelope mr-1"></i> Message</button>
                        <button type="button" class="btn btn-pill btn-outline-warning"><i class="fa fa-star mr-1"></i>Favourite</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Progress Bars -->
        <div id="progress-bars" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Progress Bars</h3>

                <p>In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.</p>
            </div>

            <div class="example col-lg-9 col-md-12 ml-auto mr-auto px-0">
                <div class="row">
                    <div class="col-md-6 pb-widths">
                        <h6 class="text-muted">Widths</h6>
                        <div class="progress progress-sm mb-4">
                            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="progress mb-4">
                            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <div class="progress progress-lg">
                            <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <h6 class="text-muted">Labels</h6>
                        <div class="progress mb-4">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
                        </div>

                        <div class="progress mb-4">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                        </div>

                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <div id="modals" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Modals</h3>
                <p>Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.</p>
            </div>

            <div class="mb-5">
                <!-- Trigger -->
                <button type="button" class="btn btn-primary btn-pill btn-lg d-table ml-auto mr-auto" data-toggle="modal" data-target="#exampleModal">
                    ✋ Click Me!
                </button>

                <!-- Modal Body -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">🤔 Think about it</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Triggering this action might affect you later. <strong>Do you still want to continue?</strong>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Nope</button>
                                <button type="button" class="btn btn-success" data-dismiss="modal">Yep</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Badges -->
        <div id="badges" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Badges</h3>
                <p>Badges are similar to buttons and are available in all theme colors with filled and outlined modes and also with three variation styles: rounded, pill-shaped and squared.</p>
            </div>

            <div class="example col-md-10 ml-auto mr-auto mb-5 pb-4">
                <div class="row mb-3">
                    <div class="d-table ml-auto mr-auto">
                        <span class="badge mr-3 badge-primary">Primary</span>
                        <span class="badge mr-3 badge-outline-secondary">Secondary</span>
                        <span class="badge mr-3 badge-pill badge-success">Success</span>
                        <span class="badge mr-3 badge-pill badge-outline-danger">Danger</span>
                        <span class="badge mr-3 badge-squared badge-warning">Warning</span>
                        <span class="badge mr-3 badge-squared badge-outline-info">Info</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Popups / Popovers -->
        <div id="popups-popovers" class="container">
            <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                <h3 class="mb-4">Tooltips & Popovers</h3>
                <p>Don't let your uses guess by attaching tooltips and popoves to any element. Just make sure you enable them first via JavaScript.</p>
            </div>

            <div class="row">
                <div class="col-lg-10 col-md-10 ml-auto mr-auto mb-5 pb-4">
                    <div class="row ml-auto mr-auto">

                        <!-- Tooltips -->
                        <div class="col-lg-6 col-md-12 mb-3">
                            <h5 class="text-muted mb-4 d-block">Tooltips</h5>

                            <!-- Tooltip: Top -->
                            <button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="top" title="I'm on top! 👆">Top</button>

                            <!-- Tooltip: Bottom -->
                            <button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="bottom" title="I'm at the bottom! 👇">
                                Bottom
                            </button>
                            <!-- Tooltip: Left -->
                            <button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="Left" title="I'm on the left! 👈">
                                Left
                            </button>

                            <!-- Tooltip: Right -->
                            <button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="right" title="I'm on the right! 👉">
                                Right
                            </button>
                        </div>

                        <!-- Popovers -->
                        <div class="col-lg-6 col-md-12">
                            <h5 class="text-muted mb-4">Popovers</h5>
                            <!-- Popovers: Top -->
                            <button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="top" data-content="On top of things!">
                                Top
                            </button>

                            <!-- Popovers: Bottom -->
                            <button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="bottom" data-content="🙃 I'm down here!">
                                Bottom
                            </button>

                            <!-- Popovers: Left -->
                            <button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="left" data-content="Oh! What's left then? 🤔">
                                Left
                            </button>

                            <!-- Popovers: Right -->
                            <button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="right" data-content="I'm always right! 😎">
                                Right
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts -->
        <div id="alerts">
            <div class="container">
                <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
                    <h3 class="mb-4">Alerts</h3>
                </div>
            </div>

            <div class="mb-5">
                <!-- Info Dismissible Alert -->
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-info"></i> <strong>Hey!</strong> I think you should know this.
                </div>

                <!-- Success Dismissible Alert -->
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-check"></i> <strong>Yay!</strong> Everything is fine!
                </div>

                <!-- Warning Dismissible Alert -->
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-warning"></i> <strong>Oops!</strong> Something might be wrong
                </div>

                <!-- Danger Dismissible Alert -->
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <i class="fa fa-exclamation-circle"></i> <strong>On no!</strong> Something really bad happened!
                </div>
            </div>
        </div>
    </div>

    <!-- Navbars -->
    <div id="navbars" class="my-5">
        <div class="section-title container ml-auto mr-auto">
            <div class="col-lg-8 col-md-10 ml-auto mr-auto mb-5">
                <h3 class="mb-4">Navbars</h3>
                <p>Create beautiful, bold and responsive navbars using the same Bootstrap 4 markup structure you already
                    know and love.</p>
            </div>
        </div>

        <div class="example">
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1"
                        aria-controls="navbarNavDropdown-1"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown-1">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-2"
                        aria-controls="navbarNavDropdown-2"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-2">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-2"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-2">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-dark bg-success mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-3"
                        aria-controls="navbarNavDropdown-3"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-3">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-3"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-3">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-dark bg-warning mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-4"
                        aria-controls="navbarNavDropdown-4"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown-4">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-4"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-4">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-5"
                        aria-controls="navbarNavDropdown-5"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-5">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-5"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-5">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
                <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-6"
                        aria-controls="navbarNavDropdown-6"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-6">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-6"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-6">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
            <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
                <img src="images/demo/shards-logo-black.svg" alt="Example Navbar 1" class="mr-2" height="30px">
                <a class="navbar-brand" href="#">Shards</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-7"
                        aria-controls="navbarNavDropdown-7"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown-7">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-7"
                               data-toggle="dropdown" aria-haspopup="true"
                               aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-7">
                                <a class="dropdown-item" href="#">Design</a>
                                <a class="dropdown-item" href="#">Development</a>
                                <a class="dropdown-item" href="#">Marketing</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-linkedin"></i></a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!-- Extras -->
    <div id="extras" class="mb-5 py-5">
        <div class="section-title container ml-auto mr-auto">
            <div class="col-lg-8 col-md-10 ml-auto mr-auto mb-5">
                <h1 class="mb-2 text-center">🎁</h1>
                <h3 class="mb-4 text-center">Extras</h3>
                <p class="text-center">That's not all! We've prepared <b>two free landing pages</b> built using
                    mostly Shards and some custom styling to help you start your next project faster.</p>
            </div>
        </div>
        <div class="container">
            <div class="row">

                <!-- Extra: App Landing Page -->
                <div class="col-md-4 mb-4 ml-auto">
                    <div class="card">
                        <img class="card-img-top" src="images/demo/shards-app-demo-page-demo.jpg"
                             alt="Shards App Promo - Demo Landing Page">
                        <div class="card-body py-3">
                            <h6 class="text-center text-muted m-0">Mobile App Promo</h6>
                        </div>
                    </div>
                    <a class="d-table ml-auto mr-auto mt-4" href="https://designrevision.com/demo/shards/extra/app-promo.html">
                        <button class="btn btn-outline-primary btn-pill">View Demo</button>
                    </a>
                </div>

                <!-- Extra: Agency Landing Page -->
                <div class="col-md-4 mb-4 mr-auto">
                    <div class="card">
                        <img class="card-img-top" src="images/demo/shards-agency-landing-page-demo.jpg"
                             alt="Shards Agency - Demo Landing Page">
                        <div class="card-body py-3">
                            <h6 class="text-center text-muted m-0">Agency Landing Page</h6>
                        </div>
                    </div>
                    <a class="d-table ml-auto mr-auto mt-4" href="https://designrevision.com/demo/shards/extra/agency-landing.html">
                        <button class="btn btn-outline-primary btn-pill">View Demo</button>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Documentation -->
    <div id="documentation" class="bg-white">
        <div class="section-title container ml-auto mr-auto py-5">
            <div class="col-lg-8 col-md-10 ml-auto mr-auto py-5">
                <h1 class="mb-2 text-center">📘</h1>
                <h3 class="mb-4 text-center">Read the Docs</h3>
                <p class="text-center">Make sure you check out the documentation and learn more about all the available components and how to use them.</p>
                <a class="d-table ml-auto mr-auto" href="https://designrevision.com/docs/shards">
                    <button class="btn btn-pill btn-outline-primary"><i class="fa fa-book mr-1"></i> Documentation</button>
                </a>
            </div>
        </div>
    </div>

    <!-- Footer CTA -->
    <div class="footer-cta bg-dark">
        <div class="container my-5">
            <div class="py-5">
                <div class="text-center">
                    <h1>🛠</h1>
                    <h2 class="text-white">Build Something!</h2>
                    <p class="text-muted col-lg-8 col-md-10 ml-auto mr-auto">What are you waiting for? <b><u>Go ahead and build
                        something!</u></b> Can't wait to see what you come up with! If you like Shards, make sure you
                        share it with your friends too!</p>
                </div>

                <div class="share d-table ml-auto mr-auto mt-5">
                    <a href="https://twitter.com/intent/tweet?url=https://designrevision.com/download/shards&text=I%27m+in+love+with+Shards%2C+a+free+Bootstrap+4+UI+kit+by+%40DesignRevision+%23ui+%23design+%23free+%23bootstrap"
                       class="btn btn-pill btn-primary mr-4" title="Share Shards on Twitter">
                        <i class="fa fa-twitter mr-1"></i> Share on Twitter</a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https://designrevision.com/download/shards"
                       class="btn btn-pill btn-primary mr-4"
                       title="Share on Facebook">
                        <i class="fa fa-facebook mr-1"></i> Share on Facebook</a>
                    <a href="https://www.linkedin.com/shareArticle?mini=true&title=Shards+%E2%80%94+A+free+and+modern+Bootstrap+4+UI+kit&url=https://designrevision.com/download/shards"
                       class="btn btn-pill btn-primary mr-4" title="Share on LinkedIn">
                        <i class="fa fa-linkedin mr-1"></i> Share on LinkedIn</a>
                </div>
            </div>
        </div>
    </div>

    <footer class="main-footer py-5">
        <p class="text-muted text-center small p-0 mb-4">&copy; Copyright 2017 — DesignRevision</p>
        <div class="social d-table ml-auto mr-auto">
            <a class="twitter mx-3 h4" href="https://twitter.com/DesignRevision" target="_blank">
                <i class="fa fa-twitter"></i>
                <span class="sr-only">View our Twitter Profile</span>
            </a>
            <a class="facebook mx-3 h4" href="https://www.facebook.com/designrevision" target="_blank">
                <i class="fa fa-facebook"></i>
                <span class="sr-only">View our Facebook Profile <span>
            </a>
            <a class="github mx-3 h4" href="https://github.com/designrevision" target="_blank">
                <i class="fa fa-github"></i>
                <span class="sr-only">View our GitHub Profile</span>
            </a>
        </div>
    </footer>
</div>

<!-- JavaScript -->
<div id="fb-root"></div>
<script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=1662270373824826"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/shards.min.js"></script>
<script src="js/demo.min.js"></script>

</body>
</html>
